import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { BannerInterface } from './interface/BannerInterface';
import { Navigation, Pagination } from 'swiper';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css';

interface IState {
    loginFlag: boolean
}

const imgStyle = {
    width: '100%'
};

export default class Banner extends React.Component<BannerInterface, IState>
{
    constructor(props:any, context:any) {
        super(props)
        this.state = {
            loginFlag: false
        }
    }

    render() {
        console.log('bannerList' , this.props);
        return (
            <Swiper
            modules={[Navigation, Pagination]}
            spaceBetween={this.props.spaceBetween} // 空间间隙
            slidesPerView={this.props.slidesPerView}
            initialSlide={this.props.initialSlide} // 初始化显示哪一个
            loop={this.props.loop} // 是否循环
            onSlideChange={() => console.log('slide change')}
            onSwiper={(swiper) => console.log(swiper)}
            threshold={this.props.threshold}
            pagination={{ clickable: true }}
            >
            {this.props.bannerList.map((item, index) => (
                <SwiperSlide key={item}><img style={imgStyle} src={item}></img></SwiperSlide>
            ))}
            </Swiper>
        )

    }
}